<template>
  <div class="task-list">
    <!-- 任务列表 -->
    <div v-for="(task, index) in paginatedTasks" :key="index"
         class="task-item" @click="navigateToTaskDetail(task)">
      <!-- 任务信息 -->
      <div class="box1">
        <div class="task-name">{{ task.name }}</div>
        <img class="team-img" src="../assets/images/teamUpTag.png" v-if="task.isGroup" alt="">
        <span class="task-money">{{ task.payment }}元/{{ task.unit }}</span>
        <span class="money-discuss" v-show="task.isPaymentNegotiable === true">可议</span>
        <img class="address-img" src="../assets/images/address2.png" alt="" />
        <span class="task-location">{{ task.region }}</span>
      </div>
      <div class="task-tags">
        <span v-for="(tag, idx) in task.tags" :key="idx" class="tag">{{ tag }}</span>
      </div>
      <!-- 用户信息 -->
      <img :src="task.avatarUrl" alt="avatar" class="user-avatar" />
      <span class="username">{{ task.senderNameShow }}</span>
      <div :class="{'online': task.ifOnline, 'offline': !task.ifOnline}">
        <div class="circle-img"></div>
        {{ task.ifOnline ? '在线' : '离线' }}
      </div>
      <!-- 按钮 -->
      <button @click="handleFavorite(task)" class="favorite">
        <img :src="task.isFavorited ? require('@/assets/images/favorite-icon2.png') : require('@/assets/images/favorite-icon.png')" alt="favorite">
        {{ task.isFavorited ? '已收藏' : '收藏' }}
      </button>
      <button class="chat" @click="goToChat(task.id, task.senderPhoneNumber, $event)">聊一聊</button>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <!-- 上一页 -->
      <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">
        <img src="../assets/images/prevPage.png" alt="">
      </button>
      <button
          v-for="page in totalPages"
          :key="page"
          :class="{'active': currentPage === page}"
          @click="goToPage(page)"
      >
        {{ page }}
      </button>
      <!-- 下一页 -->
      <button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages">
        <img src="../assets/images/nextPage.png" alt="">
      </button>
      <!-- 跳转 -->
      <div class="turn-page">
        跳至
        <input type="number" v-model.number="inputPage" @blur="jumpToPage" />
        页
      </div>
    </div>
  </div>
</template>

<script>
import {ref, computed, onMounted, watch, reactive, watchEffect} from 'vue';
import {useRouter} from "vue-router";
import {useSchoolTaskInfo} from "@/api/getSchoolTaskInfo";
import {useUploadTaskIdForChat} from "@/api/uploadTaskIdForChat";
import {useStore} from "vuex";

export default {
  name: 'SchoolShowTask',
  props: {
    filters: Object
  },
  setup(props) {
    const store = useStore(); // 获取 Vuex 实例
    const userInfo = computed(() => store.getters.getUserInfo || {}); // 确保返回对象，避免 undefined
    const PersonData = ref({
      name: "",          // 默认值为空字符串
      gender: "",        // 默认值为空字符串
      isNameShow: false, // 默认值为 false
      avatar: "",        // 默认值为空字符串
      identity: 0,       // 默认值为 0
      city: "",          // 默认值为空字符串
      birthdate: "",     // 默认值为空字符串
      school: "",        // 默认值为空字符串
      graduateYear: "",  // 默认值为空字符串
      vxNumber: "",      // 默认值为空字符串
      intro: "",         // 默认值为空字符串
      resume: "",        // 默认值为空字符串
      resumeName: "",
      ratio: 0,          // 默认值为 0
      deliverCount: 0,
      completedCount: 0,
      credit: 80,
      phoneNumber: "",
      ifOnline: 0,
    });
    watchEffect(() => {
      PersonData.value = {
        name: userInfo.value?.name || "登录",
        gender: userInfo.value?.gender || null,
        isNameShow: PersonData.value.isNameShow || false,
        avatar: userInfo.value?.avatar || "https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
        identity: userInfo.value?.identity || 3,
        city: userInfo.value?.city || "杭州",
        birthdate: userInfo.value?.birthdate || "",
        school: userInfo.value?.school || "",
        graduateYear: userInfo.value?.graduateYear || "",
        vxNumber: userInfo.value?.vxNumber || "",
        intro: userInfo.value?.intro || "",
        resume: userInfo.value?.resume || "",
        resumeName: userInfo.value?.resumeName || "",
        ratio: userInfo.value?.ratio || 0,
        deliverCount: userInfo.value?.deliverCount || 0,
        completedCount: userInfo.value?.completedCount || 0,
        credit: userInfo.value?.credit || 80,
        phoneNumber: userInfo.value?.phoneNumber || "",
        ifOnline: userInfo.value?.ifOnline || 0,
      };
      console.log('首页',userInfo.value)
    });

    // 任务数据
    const tasks = ref([
      {
        name: '社交媒体内容协助发布',
        payment: 50,
        unit:"天",
        isPaymentNegotiable:true,
        region: '杭州',
        tags: ['文案撰写', '创意策划', '每日发布'],
        deadline:"2024年12月12日",
        description:"111",
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup:true,
        peopleNumber:"3",
        category:"专业技能服务",

        imgUrls:
            [
              'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
              'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
              'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
            ],
        attachmentUrl:"111",

        username: '罗女士',
        online: true,
        isFavorited: false,
      },
      {
        name: '网站内容创作',
        payment: 150,
        unit: '天',
        isPaymentNegotiable: false,
        region: '上海',
        tags: ['文案撰写', 'SEO优化', '内容创作'],
        deadline: '2024年12月15日',
        description: '为网站创建原创内容，提升SEO排名。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '生活服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '张先生',
        online: true,
        isFavorited: false
      },
      {
        name: '企业宣传视频拍摄',
        payment: 500,
        unit: '天',
        isPaymentNegotiable: true,
        region: '北京',
        tags: ['视频拍摄', '企业宣传', '后期制作'],
        deadline: '2024年12月20日',
        description: '为公司制作宣传视频并进行后期剪辑。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '2',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '李先生',
        online: false,
        isFavorited: true
      },
      {
        name: 'UI设计师兼职',
        payment: 300,
        unit: '天',
        isPaymentNegotiable: false,
        region: '深圳',
        tags: ['UI设计', '界面设计', '用户体验'],
        deadline: '2024年12月25日',
        description: '提供UI设计与用户体验优化服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '王小姐',
        online: true,
        isFavorited: false
      },
      {
        name: '平面设计师招聘',
        payment: 200,
        unit: '天',
        isPaymentNegotiable: true,
        region: '广州',
        tags: ['平面设计', '广告设计', 'Logo设计'],
        deadline: '2024年12月10日',
        description: '设计企业品牌Logo和广告素材。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '3',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '陈先生',
        online: false,
        isFavorited: false
      },
      {
        name: '社交媒体广告管理',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: true,
        region: '上海',
        tags: ['社交媒体', '广告投放', '数据分析'],
        deadline: '2024年12月15日',
        description: '负责社交媒体广告的投放与效果分析。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '赵小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '活动策划与执行',
        payment: 800,
        unit: '天',
        isPaymentNegotiable: false,
        region: '成都',
        tags: ['活动策划', '执行', '市场推广'],
        deadline: '2024年12月30日',
        description: '为公司策划并执行各类市场活动。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '5',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '刘先生',
        online: true,
        isFavorited: false
      },
      {
        name: '翻译服务',
        payment: 60,
        unit: '天',
        isPaymentNegotiable: false,
        region: '北京',
        tags: ['翻译', '中文', '英语'],
        deadline: '2024年12月5日',
        description: '提供中英互译服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '孙小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '网站前端开发',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: false,
        region: '杭州',
        tags: ['前端开发', 'Vue', 'HTML'],
        deadline: '2024年12月12日',
        description: '负责网站前端的开发与优化。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '周先生',
        online: true,
        isFavorited: false
      },
      {
        name: '企业宣传视频拍摄',
        payment: 500,
        unit: '天',
        isPaymentNegotiable: true,
        region: '北京',
        tags: ['视频拍摄', '企业宣传', '后期制作'],
        deadline: '2024年12月20日',
        description: '为公司制作宣传视频并进行后期剪辑。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '2',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '李先生',
        online: false,
        isFavorited: true
      },
      {
        name: 'UI设计师兼职',
        payment: 300,
        unit: '天',
        isPaymentNegotiable: false,
        region: '深圳',
        tags: ['UI设计', '界面设计', '用户体验'],
        deadline: '2024年12月25日',
        description: '提供UI设计与用户体验优化服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '王小姐',
        online: true,
        isFavorited: false
      },
      {
        name: '平面设计师招聘',
        payment: 200,
        unit: '天',
        isPaymentNegotiable: true,
        region: '广州',
        tags: ['平面设计', '广告设计', 'Logo设计'],
        deadline: '2024年12月10日',
        description: '设计企业品牌Logo和广告素材。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '3',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '陈先生',
        online: false,
        isFavorited: false
      },
      {
        name: '社交媒体广告管理',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: true,
        region: '上海',
        tags: ['社交媒体', '广告投放', '数据分析'],
        deadline: '2024年12月15日',
        description: '负责社交媒体广告的投放与效果分析。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '赵小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '活动策划与执行',
        payment: 800,
        unit: '天',
        isPaymentNegotiable: false,
        region: '成都',
        tags: ['活动策划', '执行', '市场推广'],
        deadline: '2024年12月30日',
        description: '为公司策划并执行各类市场活动。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '5',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '刘先生',
        online: true,
        isFavorited: false
      },
      {
        name: '翻译服务',
        payment: 60,
        unit: '天',
        isPaymentNegotiable: false,
        region: '北京',
        tags: ['翻译', '中文', '英语'],
        deadline: '2024年12月5日',
        description: '提供中英互译服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '孙小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '网站前端开发',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: false,
        region: '杭州',
        tags: ['前端开发', 'Vue', 'HTML'],
        deadline: '2024年12月12日',
        description: '负责网站前端的开发与优化。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '周先生',
        online: true,
        isFavorited: false
      },
      {
        name: '企业宣传视频拍摄',
        payment: 500,
        unit: '天',
        isPaymentNegotiable: true,
        region: '北京',
        tags: ['视频拍摄', '企业宣传', '后期制作'],
        deadline: '2024年12月20日',
        description: '为公司制作宣传视频并进行后期剪辑。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '2',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '李先生',
        online: false,
        isFavorited: true
      },
      {
        name: 'UI设计师兼职',
        payment: 300,
        unit: '天',
        isPaymentNegotiable: false,
        region: '深圳',
        tags: ['UI设计', '界面设计', '用户体验'],
        deadline: '2024年12月25日',
        description: '提供UI设计与用户体验优化服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '王小姐',
        online: true,
        isFavorited: false
      },
      {
        name: '平面设计师招聘',
        payment: 200,
        unit: '天',
        isPaymentNegotiable: true,
        region: '广州',
        tags: ['平面设计', '广告设计', 'Logo设计'],
        deadline: '2024年12月10日',
        description: '设计企业品牌Logo和广告素材。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '3',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '陈先生',
        online: false,
        isFavorited: false
      },
      {
        name: '社交媒体广告管理',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: true,
        region: '上海',
        tags: ['社交媒体', '广告投放', '数据分析'],
        deadline: '2024年12月15日',
        description: '负责社交媒体广告的投放与效果分析。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '赵小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '活动策划与执行',
        payment: 800,
        unit: '天',
        isPaymentNegotiable: false,
        region: '成都',
        tags: ['活动策划', '执行', '市场推广'],
        deadline: '2024年12月30日',
        description: '为公司策划并执行各类市场活动。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '5',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '刘先生',
        online: true,
        isFavorited: false
      },
      {
        name: '翻译服务',
        payment: 60,
        unit: '天',
        isPaymentNegotiable: false,
        region: '北京',
        tags: ['翻译', '中文', '英语'],
        deadline: '2024年12月5日',
        description: '提供中英互译服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '孙小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '网站前端开发',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: false,
        region: '杭州',
        tags: ['前端开发', 'Vue', 'HTML'],
        deadline: '2024年12月12日',
        description: '负责网站前端的开发与优化。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '周先生',
        online: true,
        isFavorited: false
      },
      {
        name: '企业宣传视频拍摄',
        payment: 500,
        unit: '天',
        isPaymentNegotiable: true,
        region: '北京',
        tags: ['视频拍摄', '企业宣传', '后期制作'],
        deadline: '2024年12月20日',
        description: '为公司制作宣传视频并进行后期剪辑。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '2',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '李先生',
        online: false,
        isFavorited: true
      },
      {
        name: 'UI设计师兼职',
        payment: 300,
        unit: '天',
        isPaymentNegotiable: false,
        region: '深圳',
        tags: ['UI设计', '界面设计', '用户体验'],
        deadline: '2024年12月25日',
        description: '提供UI设计与用户体验优化服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '王小姐',
        online: true,
        isFavorited: false
      },
      {
        name: '平面设计师招聘',
        payment: 200,
        unit: '天',
        isPaymentNegotiable: true,
        region: '广州',
        tags: ['平面设计', '广告设计', 'Logo设计'],
        deadline: '2024年12月10日',
        description: '设计企业品牌Logo和广告素材。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '3',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '陈先生',
        online: false,
        isFavorited: false
      },
      {
        name: '社交媒体广告管理',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: true,
        region: '上海',
        tags: ['社交媒体', '广告投放', '数据分析'],
        deadline: '2024年12月15日',
        description: '负责社交媒体广告的投放与效果分析。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '赵小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '活动策划与执行',
        payment: 800,
        unit: '天',
        isPaymentNegotiable: false,
        region: '成都',
        tags: ['活动策划', '执行', '市场推广'],
        deadline: '2024年12月30日',
        description: '为公司策划并执行各类市场活动。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: true,
        peopleNumber: '5',
        category: '商务合作服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '刘先生',
        online: true,
        isFavorited: false
      },
      {
        name: '翻译服务',
        payment: 60,
        unit: '天',
        isPaymentNegotiable: false,
        region: '北京',
        tags: ['翻译', '中文', '英语'],
        deadline: '2024年12月5日',
        description: '提供中英互译服务。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '其他服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '孙小姐',
        online: true,
        isFavorited: true
      },
      {
        name: '网站前端开发',
        payment: 400,
        unit: '天',
        isPaymentNegotiable: false,
        region: '杭州',
        tags: ['前端开发', 'Vue', 'HTML'],
        deadline: '2024年12月12日',
        description: '负责网站前端的开发与优化。',
        avatar: 'https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66',
        isGroup: false,
        peopleNumber: '1',
        category: '专业技能服务',
        imgUrls: [
          'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
          'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
        ],
        attachmentUrl: 'https://example.com/attachment',
        username: '周先生',
        online: true,
        isFavorited: false
      },
    ]);
    // 计算过滤后的任务
    /*const filteredTasks = computed(() => {
      return tasks.value.filter(task => {
        return (
            (props.filters.category ? task.category === props.filters.category : true) &&
            (props.filters.region ? task.region === props.filters.region : true) &&
            (props.filters.payment ? task.payment === props.filters.payment : true) &&
            (props.filters.deadline ? task.deadline === props.filters.deadline : true) &&
            (props.filters.peopleNumber ? task.peopleNumber === props.filters.peopleNumber : true)
        );
      });
    });*/

    const filteredTasks = ref([
      /*{
        senderPhoneNumber: "",
        name: "",
        type: 0,
        payment: 0,
        unit: "天",
        isPaymentNegotiable: true,
        deadline: "",
        region: "",
        description: "",
        tags: [
          ""
        ],
        imgUrls: [
          ""
        ],
        attachmentUrl: "",
        isGroup: true,
        peopleNumber: 0,
        status: 0, //单子的状态
        avatarUrl: "",
        ifOnline: 0,
        senderNameShow: ""
      }*/
    ])
    // 创建一个本地副本用于操作
    const localFilters = reactive({ ...props.filters });

    const { handleGetSchoolTaskInfo, isLoading } = useSchoolTaskInfo(localFilters, filteredTasks)
    const taskId = ref(null)
    const phoneNumber = ref(null)
    const { handleUploadTaskIdForChat, isLoading0 } = useUploadTaskIdForChat(taskId, phoneNumber, PersonData.value.phoneNumber)
    const goToChat = (selectedTaskId, selectedPhoneNumber, event) => {
      event.stopPropagation(); // 阻止冒泡
      taskId.value = selectedTaskId;
      phoneNumber.value = selectedPhoneNumber
      router.push({
        name: 'MessagePage',
      });
    }
    watch([taskId, phoneNumber], () => {
      handleUploadTaskIdForChat();
    });
    // 页面加载时设置默认值并发送请求
    onMounted(() => {
      handleGetSchoolTaskInfo(); // 根据新筛选条件发送请求
    });
    // 监听筛选条件变化
    watch(
        () => props.filters,
        (newFilters) => {
          Object.assign(localFilters, newFilters); // 更新本地副本
          /*          console.log('筛选条件变化:', localFilters);*/
          handleGetSchoolTaskInfo(); // 根据新筛选条件发送请求
        },
        { deep: true } // 深度监听对象内部属性的变化
    );

    // 分页数据
    const currentPage = ref(1);
    const pageSize = ref(12);
    const inputPage = ref(1); // 输入框的页码
    const totalPages = computed(() => Math.ceil(filteredTasks.value.length / pageSize.value));
    // 当前页任务列表
    const paginatedTasks = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredTasks.value.slice(start, end);
    });
    // 分页跳转
    const goToPage = (page) => {
      if (page > 0 && page <= totalPages.value) {
        currentPage.value = page;
      }
    };
    // 输入框跳转
    const jumpToPage = () => {
      if (inputPage.value > 0 && inputPage.value <= totalPages.value) {
        currentPage.value = inputPage.value;
      } else {
        inputPage.value = currentPage.value; // 无效输入时重置输入框
      }
    };

    // 收藏功能
    const handleFavorite = (task) => {
      task.isFavorited = !task.isFavorited;
    };
    const router = useRouter();
    // 导航到任务详情页的方法
    const navigateToTaskDetail = (task) => {
      router.push({
        name: 'taskDetailPage',
        query: { task: JSON.stringify(task) }, // 使用 query 传递任务数据
      });
    };

    return {
      tasks,
      localFilters,
      filteredTasks,
      paginatedTasks,
      currentPage,
      totalPages,
      goToPage,
      handleFavorite,
      inputPage,
      jumpToPage,
      isLoading,
      handleGetSchoolTaskInfo,
      navigateToTaskDetail,
      handleUploadTaskIdForChat,
      isLoading0,
      goToChat,
      phoneNumber
    };
  },
};
</script>

<style scoped>
.task-list {
  position: absolute;
  left: 10.9375vw;
  top: 57.592vh;
  width: 78.125vw;
  height: fit-content;
  max-height: 152.23vh;
  box-sizing: border-box;
  background: rgba(242, 244, 245, 1);
  padding-top: 0.12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.11vh 0;
}
.task-item {
  position: relative;
  width: 78.125vw;
  height: 11.667vh;
  border-radius: 0.833vw;
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  cursor: pointer;
}
.task-item .box1{
  position: absolute;
  top: 1.9vh;
  left: 1.31vw;
  width: fit-content;
  height: 2.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.task-name{
  position: relative;
  line-height: 2.5vh;
  font-size: 0.9375vw;
  font-weight: 600;
  color: rgba(32, 32, 32, 1);
}
.team-img{
  position: relative;
  width: 1.16vw;
  height: 1.16vw;
  margin-left: 0.833vw;
}
.task-money {
  position: relative;
  font-size: 0.9375vw;
  font-weight: 600;
  color: rgba(238, 113, 62, 1);
  margin-left: 1.875vw;
}
.money-discuss{
  position: relative;
  margin-left: 0.833vw;
  width: 5vh;
  height: 2.06vh;
  top: 0.145vh;
  line-height: 1.96vh;
  border-radius: 4vw;
  border: 0.00521vw solid rgba(238, 113, 62, 1);
  font-size: 0.625vw;
  color: rgba(238, 113, 62, 1);
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.address-img{
  position: relative;
  width: 0.66vw;
  margin-left: 1.875vw;
  margin-right: 0.2vw;
}
.task-location{
  position: relative;
  font-size: 0.63vw;
  color: rgba(102, 102, 102, 1);
}
.task-tags {
  position: absolute;
  left: 1.31vw;
  bottom: 2.35vh;
}
.tag {
  display: inline-block;
  margin-right: 1.25vw;
  padding: 0 1vw;
  width: fit-content;
  height: 2.28vh;
  border-radius: 6.5625vw;
  background: rgba(255, 255, 255, 1);
  border: 0.0521vw solid rgba(153, 153, 153, 1);
  font-size: 0.625vw;
  line-height: 2.0371vh;
  color: rgba(102, 102, 102, 1);
  box-sizing: border-box;
}
.user-avatar {
  position: absolute;
  border-radius: 50%;
  left: 52.72vw;
  top: 3.241vh;
  width: 5.2vh;
  height: 5.2vh;
}
.username{
  position: absolute;
  left: 56.883vw;
  top: 3vh;
  font-size: 0.833vw;
  color: rgba(32, 32, 32, 1);
}
.online {
  position: absolute;
  display: flex;
  align-items: center;
  padding-left: 0.75vh;
  left: 56.883vw;
  top: 6.5vh;
  width: 2.916vw;
  height: 2.3vh;
  line-height: 2.35vh;
  border-radius: 0.208vw;
  color: rgba(67, 207, 124, 1);
  font-size: 0.625vw;
  background: rgba(67, 207, 124, 0.2);
  box-sizing: border-box;
}
.online .circle-img{
  background: rgba(67, 207, 124, 1);
  width: 0.75vh;
  height: 0.75vh;
  margin-right: 0.75vh;
  border-radius: 50%;
}
.offline {
  position: absolute;
  display: flex;
  padding-left: 0.75vh;
  align-items: center;
  left: 56.883vw;
  top: 6.5vh;
  width: 2.916vw;
  height: 2.3vh;
  line-height: 2.35vh;
  border-radius: 0.208vw;
  color: rgba(153, 153, 153, 1);
  font-size: 0.625vw;
  background: rgba(153, 153, 153, 0.2);
  box-sizing: border-box;
}
.offline .circle-img{
  background: rgba(153, 153, 153, 1);
  width: 0.75vh;
  height: 0.75vh;
  margin-right: 0.75vh;
  border-radius: 50%;
}
.favorite {
  position: absolute;
  left: 62.3vw;
  top: 4.074vh;
  width: 6.25vw;
  height: 3.704vh;
  padding-left: 1.07vw;
  border-radius: 5.21vw;
  border: 0.10417vw solid rgba(13, 127, 233, 1);
  font-size: 0.833vw;
  font-weight: 600;
  color: rgba(13, 127, 233, 1);
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}
.favorite img{
  margin-right: 0.5vw;
  width: 1.9vh;
  height: 1.9vh;
}
.chat {
  position: absolute;
  left: 70.21vw;
  top: 4.074vh;
  width: 6.25vw;
  height: 3.704vh;
  border-radius: 5.21vw;
  font-size: 0.833vw;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(90deg, rgba(14, 127, 232, 1) 0%, rgba(0, 95, 204, 1) 100%);
  cursor: pointer;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 4.15vh;
  margin-top: 3.33vh;
  margin-bottom: 5.926vh;
  gap: 0 0.625vw;
}
.pagination button {
  width: 4.15vh;
  height: 4.15vh;
  border-radius: 0.48vw;
  background: rgba(255, 255, 255, 1);
  border: 0.0521vw solid rgba(199, 199, 199, 1);
  font-size: 0.833vw;
  color: rgba(51, 51, 51, 1);
}
.pagination button img{
  height: 1.39vh;
}
.pagination .active {
  background: rgba(13, 127, 233, 1);
  color: rgba(255, 255, 255, 1);
  border:  0.0521vw solid rgba(13, 127, 233, 1);
}
.pagination .turn-page{
  margin-left: 0.48vw;
  font-size: 0.729vw;
  color: rgba(51, 51, 51, 1);
}
.pagination .turn-page input{
  width: 6.8vh;
  height: 4.15vh;
  border-radius: 0.48vw;
  background: rgba(255, 255, 255, 1);
  border: 0.0521vw solid rgba(199, 199, 199, 1);
  margin: 0 0.3vw;
  font-size: 0.833vw;
  color: rgba(51, 51, 51, 1);
  box-sizing: border-box;
  padding-left: 0.28vw;
}
.pagination .turn-page input:focus{
  outline: none;
}
</style>
